<template>
	<el-container>
	    <el-aside class="mainel-aside" >
			<mainAside></mainAside>
		</el-aside>
	    
		<el-container>
			<el-header>
				<mainHeader></mainHeader>
			</el-header>
			
			<el-main>
				<router-view></router-view>	
			</el-main>
			
			<el-footer>
				<mainFooter></mainFooter>
			</el-footer>
	    </el-container>
	
	</el-container>
</template>

<script>
	import mainAside from '../main_aside/main_aside.vue'
	import mainHeader from '../main_header/main_header.vue'
	import mainFooter from '../main_footer/main_footer.vue'
	export default{
		components:{
			mainAside,mainHeader,mainFooter
		}
	}
</script>

<style scoped="scoped">
	.el-container{
		height: 100%;
	}
	.mainel-aside{
		width:14.6875rem;
		border-right: 0.0625rem #e6e6e6 solid;
	}
	/* 滚动条样式 */
	.el-aside::-webkit-scrollbar{
		width: 0.1875rem;
		height: 0.1875rem;
	}
	.el-aside::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: #ebebeb;
	}
	.el-aside::-webkit-scrollbar-track {  /*滚动条里面轨道*/
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        border-radius: 10px;
        background: #fff;
	}
	.el-main::-webkit-scrollbar{
		width: 0.1875rem;
		height: 0.1875rem;
	}
	.el-main::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	    background: #ebebeb;
	}
	.el-main::-webkit-scrollbar-track {  /*滚动条里面轨道*/
	    /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
	    border-radius: 10px;
	    background: #fff;
	}
	.el-footer{
		height: 3.125rem;
		border-top: 0.0625rem #e6e6e6 solid;
	}
	/* 响应式 */
	@media screen and (max-width: 641px) {
		.el-aside{
			display: none;
		}	
		.el-footer{
			display: none;
		}
	}
	.el-header{
		border-bottom: 0.0625rem #e6e6e6 solid;
		height: 3.75rem;
	}
</style>
